<!-- 交易——>U本位 -->
<template>
  <div>
    <!-- 头部 -->
    <UTradingHeader
      :coinInfo="coinInfo"
      @showSidePopup="showSidePopup"
    ></UTradingHeader>

    <!-- 主体内容 -->
    <UTradingContent :coinInfo="coinInfo"></UTradingContent>

    <!-- 左侧切换币种 -->
    <PublicPopup
      :show="sidePopup"
      @handelClose="handelClose"
      :direction="`left`"
      :height="`100%`"
      :width="`80%`"
      :showHeader="false"
      :empty="false"
    >
      <template #emptyContentCustomize>
        <LeftSide @linkTo="linkTo" @close="handelClose"></LeftSide>
      </template>
    </PublicPopup>
  </div>
</template>

<script setup>
import UTradingHeader from './ustandard/header/index.vue' // U本位header部分
import UTradingContent from './ustandard/content/index.vue' // U本位content部分
import PublicPopup from '@/components/Popup/public.vue'
import LeftSide from './common/leftSide.vue'
import { showToast } from 'vant'
import { _t18 } from '@/utils/public'
import { setCollect, removeCollect } from '@/api/trade'
import { useTradeStore } from '@/store/trade'
const tradeStore = useTradeStore()
import { useRoute, useRouter } from 'vue-router'
import { onMounted } from 'vue'
const $route = useRoute()
const $router = useRouter()
const props = defineProps({
  headerList: {
    type: Array
  }
})

// console.log('1111111')
/**
 * 币种信息
 */
// 当前币种信息
// const coinInfo = ref({})
// // 监听路由展示对应币种信息
// watch(
//   () => $route.query.symbol,
//   (val) => {
//     coinInfo.value = tradeStore.contractCoinList.filter((item, index) => {
//       return item.coin === val
//     })[0]
//   },
//   {
//     deep: true
//   }
// )

// ✅ 用 computed 实时计算币种信息
const coinInfo = computed(() => {
  const list = tradeStore.contractCoinList || []
  const symbol = $route.query.symbol || 'btc'
  if (!list.length) return {}

  const match = list.find(item => item.coin === symbol)
  return match || list[0] || {}
})

// 初始化展示币种信息
const init = () => {
  if ($route.query.symbol) {
    coinInfo.value = tradeStore.contractCoinList.filter((item, index) => {
      return item.coin === $route.query.symbol
    })[0]
    if (!coinInfo.value) {
      coinInfo.value = tradeStore.contractCoinList[0]
    }
  } else {
    coinInfo.value = tradeStore.contractCoinList[0]
  }
}

/**
 * 侧边栏
 */
const sidePopup = ref(false)
const showSidePopup = () => {
  sidePopup.value = true
}
const handelClose = () => {
  sidePopup.value = false
}

/** 更换当前路由信息 */
const linkTo = (item, type) => {
  // $route.query.symbol = item
  // $route.query.type = type||$route.query.type
  $router.push({
      path: $route.path,
      query: { 
        ...$route.query,
        symbol: item,
        type: type||$route.query.type
      }
    })
  sidePopup.value = false
  // getHeader()
}

onMounted(() => {
  // init()
})

</script>

<style lang="scss" scoped></style>
